<template>
  <div class="sub-page-container">
    <div class="layout">
      <AsideNav :data="appGroupList" />
      <div class="appCenter-main">
        <AppGroup v-for="group of appGroupList" :key="group.id" v-bind="group" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { queryAppsList } from '@/api/app-center';
import type { AppGroupRecord } from '@/api/app-center';
import AsideNav from './components/AsideNav.vue';
import AppGroup from './components/AppGroup.vue';

const appGroupList = ref<AppGroupRecord[]>([]);

onMounted(() => {
  _getAppGroupList();
});

function _getAppGroupList() {
  queryAppsList().then(res => {
    appGroupList.value = res;
  });
}

</script>

<style scoped lang="less">
.layout {
  display: flex;
  align-items: center;
  height: 100%;
  background-color: #f5f6fa;
  background-image: linear-gradient(180deg, #fcfcfc, #f5f6fa 10%, #f5f6fa);
  position: fixed;
}

.appCenter-aside {
  height: 100%;
  position: relative;
}

.appCenter-main {
  height: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  width: 100%;
}
</style>

<style lang="less" scoped>
// responsive
@media (max-width: @screen-lg) {
  .layout {
    flex-wrap: wrap;

    &-left-side {
      flex: 1;
      flex-basis: 100%;
      margin-bottom: 16px;
    }

    &-content {
      flex: none;
      flex-basis: 100%;
      order: -1;
      padding: 0;
      margin-bottom: 16px;
    }

    &-right-side {
      flex-basis: 100%;
    }
  }
}
</style>
